import { Switch } from "@arco-design/web-react";
import { log, info, warn, error } from "@/util/tio"
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { selectRoot, upState } from "@/store/rootSlice";


export function SwitchTheme() {
  const root = useSelector(selectRoot);
  log(root, "root");
  const dispatch = useDispatch();

  useEffect(() => {
    // 设置主题背景
    if (root.theme) {
      document.body.setAttribute("arco-theme", root.theme);
    }
    return () => { };
  }, [root.theme]);

  return (
    <>
      <Switch
        checkedText='暗黑'
        uncheckedText='明亮'
        className="w-4rem"
        checked={root.theme === "dark"}
        onChange={
          (checked, e) => {
            let root = { theme: checked ? "dark" : "light" };
            dispatch(upState(root));
          }
        }
      />
    </>
  );
}
export default SwitchTheme;
